<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DropdownList</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Country</span><span class="quot">&quot;</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">string</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">Data</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>Countries</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">TextField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>((item)=&gt;item.Name)</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">ValueField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>((item)=&gt;item.Iso)</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-SelectedValues</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>selectedDropValues</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">SelectionMode</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">DropdownListSelectionMode</span><span class="enumValue">.Checkbox</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">MaxMenuHeight</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">200px</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
    Select item
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">DropdownList</span><span class="htmlTagDelimiter">&gt;</span>

<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span> <span class="htmlAttributeName">Horizontal</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldBody</span> <span class="htmlAttributeName">ColumnSize</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">ColumnSize</span><span class="enumValue">.Is12</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
        Selected values: <span class="atSign">&#64;</span>(selectedDropValues is not null ? string.Join( &#39;,&#39;, selectedDropValues ) : &quot;&quot;);
    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldBody</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldBody</span> <span class="htmlAttributeName">ColumnSize</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">ColumnSize</span><span class="enumValue">.Is12</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
        Selected texts: <span class="atSign">&#64;</span>(selectedDropValues is not null 
                        ? string.Join( &#39;,&#39;, selectedDropValues.Select( x =&gt; Countries.FirstOrDefault( country =&gt; country.Iso == x )?.Name ?? string.Empty )) 
                        : string.Empty )
    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldBody</span><span class="htmlTagDelimiter">&gt;</span>
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
</pre></div>
<div class="csharp"><pre>
<span class="atSign">&#64;</span>code{
    [Inject]
    <span class="keyword">public</span> CountryData CountryData { <span class="keyword">get</span>; <span class="keyword">set</span>; }
    <span class="keyword">public</span> IEnumerable&lt;Country&gt; Countries;

    <span class="keyword">protected</span> <span class="keyword">override</span> <span class="keyword">async</span> Task OnInitializedAsync()
    {
        Countries = <span class="keyword">await</span> CountryData.GetDataAsync();
        <span class="keyword">await</span> <span class="keyword">base</span>.OnInitializedAsync();
    }

    <span class="keyword">private</span> IReadOnlyList&lt;<span class="keyword">string</span>&gt; selectedDropValues { <span class="keyword">get</span>; <span class="keyword">set</span>; } = <span class="keyword">new</span>[] { <span class="string">&quot;AM&quot;</span>, <span class="string">&quot;AF&quot;</span> };

}
</pre></div>
</div>
